Skip to content

feat: dependency sizes#2464

Draft
Mopsgamer wants to merge 4 commits intonpmx-dev:mainfrom
Mopsgamer:feat-dep-sizes
Draft

feat: dependency sizes#2464
Mopsgamer wants to merge 4 commits intonpmx-dev:mainfrom
Mopsgamer:feat-dep-sizes

Conversation

@Mopsgamer
Copy link
Copy Markdown

@Mopsgamer Mopsgamer commented Apr 10, 2026 •
edited
Loading

🔗 Linked issue

Resolves #2401

Caution

This is a prototype. This PR may change significantly at any time. To avoid wasting time on potentially obsolete code, please use the issue thread for functional suggestions rather than performing a detailed code review.

🧭 Context

This PR adds a new UI component to the DEPENDENCIES section of the sidebar to provide better visibility into package sizes. It allows users to view both the own and total sizes for each first-level dependency.

An icon has been added next to the version of each direct dependency; hovering over it reveals a tooltip with the package's size breakdown.

image image

Note: Some issues are visible.

📚 Description

A sliced bar component has been implemented to visualize dependency sizes.

  • The bar represents direct dependencies and does not consider devDependencies.
  • Slices are clickable; information is displayed via tooltips on hover.
  • Tooltips show the package name, total size, own size, and the percentage of the total package size.
  • Slices for bundled dependencies and the 'own size' slice are represented in blue.
  • The 'own size' slice displays the size metric without an associated package name.
  • Standard direct dependencies use black for the light theme or a light color for the dark theme.
  • Small dependencies are automatically grouped into a single slice to maintain layout clarity.
  • A very transparent gray slice exists for edge-case sizes that have not been discovered or loaded.

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 10, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Apr 23, 2026 8:58pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Apr 23, 2026 8:58pm
npmx-lunaria Ignored Ignored Apr 23, 2026 8:58pm

Request Review

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 10, 2026

Hello! Thank you for opening your first PR to npmx, @Mopsgamer! 🚀

Here’s what will happen next:

  1. Our GitHub bots will run to check your changes.
    If they spot any issues you will see some error messages on this PR.
    Don’t hesitate to ask any questions if you’re not sure what these mean!

  2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

  3. One or more of our maintainers will take a look and may ask you to make changes.
    We try to be responsive, but don’t worry if this takes a few days.

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 10, 2026 •
edited
Loading

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
2422 1 2421 5
View the top 1 failed test(s) by shortest run time 
test/unit/a11y-component-coverage.spec.ts > a11y component test coverage > should have accessibility tests for all components (or be explicitly skipped)
Stack Traces | 0.013s run time 
AssertionError: Missing a11y tests for 1 component(s):
  - Package/SizeBar.vue

To fix: Add tests in test/nuxt/a11y.spec.ts or add to SKIPPED_COMPONENTS in test/unit/a11y-component-coverage.spec.ts with justification.: expected 1 to equal +0

- Expected
+ Received

- 0
+ 1

 ❯ test/unit/a11y-component-coverage.spec.ts:181:12
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.1.16_@opentelemetry+api@1.9.0_@types+node@24.12.0_esbuil_2773ddb323d207fb9ee238414376fdef/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/chunk-artifact.js:302:14
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.1.16_@opentelemetry+api@1.9.0_@types+node@24.12.0_esbuil_2773ddb323d207fb9ee238414376fdef/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/chunk-artifact.js:1893:28
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.1.16_@opentelemetry+api@1.9.0_@types+node@24.12.0_esbuil_2773ddb323d207fb9ee238414376fdef/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/chunk-artifact.js:2316:24
 ❯ runWithCancel node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.1.16_@opentelemetry+api@1.9.0_@types+node@24.12.0_esbuil_2773ddb323d207fb9ee238414376fdef/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/chunk-artifact.js:2313:12
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.1.16_@opentelemetry+api@1.9.0_@types+node@24.12.0_esbuil_2773ddb323d207fb9ee238414376fdef/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/chunk-artifact.js:2295:24
 ❯ runWithTimeout node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.1.16_@opentelemetry+api@1.9.0_@types+node@24.12.0_esbuil_2773ddb323d207fb9ee238414376fdef/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/chunk-artifact.js:2262:12
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.1.16_@opentelemetry+api@1.9.0_@types+node@24.12.0_esbuil_2773ddb323d207fb9ee238414376fdef/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/chunk-artifact.js:2945:70

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 10, 2026 •
edited
Loading

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a6e66dc0-583a-4142-a863-23bf559d78d3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

The PR adds optional props to the Dependencies component: packageSize?: InstallSizeResult | null and bundledDependencies?: boolean | string[]. It implements a client-only useAsyncData flow that resolves each dependency version, fetches per-dependency install-size from /api/registry/install-size/<name>/v/<resolvedVersion> with cancellation support, and aggregates results into sizereqData. The component computes per-dependency percentages (visible vs others using a threshold), detects bundled dependencies, and renders a horizontal stacked bar plus per-dependency tooltips and loading spinners. The package page now passes installSize and a normalized bundledDependencies value into the component.

Possibly related PRs

Suggested reviewers

  • danielroe
  • ghostdevv
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The PR implements the core objectives from #2401: displaying total unpacked size for dependencies with a visual distribution bar and per-dependency size information via tooltips.
Out of Scope Changes check ✅ Passed All changes are scoped to implementing the size visualization feature. Dependencies.vue adds the visualization component, and package page updates pass necessary props—no unrelated changes detected.
Description check ✅ Passed The pull request description clearly relates to the changeset, detailing the addition of a size visualization component for package dependencies with specific UI features and functionality.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot]
coderabbitai Bot reviewed Apr 10, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: dc166ab1-08f1-4e47-87e2-f2182761254a

📥 Commits

Reviewing files that changed from the base of the PR and between 4123e8d and f6aa690.

📒 Files selected for processing (2)
  • app/components/Package/Dependencies.vue
  • app/pages/package/[[org]]/[name].vue

Comment thread app/components/Package/Dependencies.vue
Comment thread app/components/Package/Dependencies.vue
Comment thread app/components/Package/Dependencies.vue Outdated
Comment thread app/components/Package/Dependencies.vue Outdated
@serhalp serhalp added the needs review This PR is waiting for a review from a maintainer label Apr 10, 2026
@ghostdevv ghostdevv marked this pull request as draft April 12, 2026 02:12
@ghostdevv
Copy link
Copy Markdown
Contributor

ghostdevv commented Apr 12, 2026

Marking this as draft while you work on it 🙏

@serhalp serhalp added ux Related to wider UX decisions needs discussion An idea that needs more discussion to understand the scope and impact. labels Apr 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

needs discussion An idea that needs more discussion to understand the scope and impact. needs review This PR is waiting for a review from a maintainer ux Related to wider UX decisions

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Comprehensive size breakdown for package and dependency tree

3 participants

@Mopsgamer @ghostdevv @serhalp